<template>
	<div id="obing" style="width:95%;height:90%;"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'onebing',
  props: ['onebing'],
  data () {
    return {
      // 页面查询数据
      data: [],
      areaData: [],
      queryData: {
        selectArea: 0,
        date: []
      },
      myChart: null,
      option: {

      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.hadleGetFilesListApi()
    })
  },
  methods: {
    hadleGetFilesListApi (x) {
      const option = {
        title: [{
          text: '回收占比',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 20,
            fontWeight:100
          },
          x: 'left'
        }],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },

        legend: {
          textStyle: { // 图例文字的样式
            color: '#fff',
            fontSize: 15
          },
          orient: 'vertical',
          // top: 10,
          right: 10,
          bottom: 10,
          icon: 'roundRect',   //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 30,  // 设置宽度
          itemHeight: 12, // 设置高度
          itemGap: 15 // 设置间距
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },

        color: [ '#0f86e8', '#23be7a', '#e5d71f','#0ff'],
        series: [
          {
            type: 'pie',
            name: '今日',
            radius: ['45%', '65%'],
            center: ['35%', '60%'],
            selectedMode: 'single',
            labelLine: {
              normal: {
                length: 1
              }
            },
            label: {
              normal: {
                formatter: '{d}%',
                textStyle: {
                  fontWeight: 'normal',
                  fontSize: 15
                }
              }
            },
            data: x,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      let myChart = this.$echarts.init(document.getElementById('obing'))
      myChart.setOption(option)
				      // 默认高亮
				      let index = 0 // 高亮索引
				      myChart.dispatchAction({
				        type: 'highlight',
				        seriesIndex: index,
				        dataIndex: index
				      })
				      myChart.on('mouseover', function (e) {
				        if (e.dataIndex != index) {
				          myChart.dispatchAction({
				            type: 'downplay',
				            seriesIndex: 0,
				            dataIndex: index
				          })
				        }
				      })
				      myChart.on('mouseout', function (e) {
				        index = e.dataIndex
				        myChart.dispatchAction({
				          type: 'highlight',
				          seriesIndex: 0,
				          dataIndex: e.dataIndex
				        })
				      })
      window.addEventListener('resize', function () {
				    myChart.resize()
      })
    }
  },
  watch: {
    onebing (newval) {
      var x = [
        {name: '可回收物',value: newval.recycle},
        {name: '生活垃圾',value: newval.garbage},
        {name: '有毒有害',value: newval.harmful},
        {name: '其他垃圾',value: newval.other},
      ]
      this.hadleGetFilesListApi(x)
    }
  }
}
</script>
